<template>
    <t-modal
        :title="title"
        :width="700"
        :visible="visible"
        @ok="() => { $emit('ok') }"
        @cancel="() => { $emit('cancel') }"
        destroyOnClose	
    >
        <a-form :form="form">
            <a-row>
                <a-col :span="24">
                    <a-form-item label="上级密级" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-tree-select
                            v-decorator="['pid']"
                            tree-data-simple-mode
                            style="width: 100%"
                            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                            :tree-data="treeData"
                            placeholder="请选择上级密级"
                            :replaceFields="{
                                title:'secrecyName',
                                value:'id',
                            }"
                        />
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item label="密级名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-input placeholder="请输入密级名称" v-decorator="[
                            'secrecyName',
                            { rules: [{ required: true, min: 1, message: '必填' }] },]"
                        />
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item label="密级编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-input placeholder="请输入密级编码" v-decorator="[
                            'secrecyCode',
                            { rules: [{ required: true, min: 1, message: '必填' }] },]"
                        />
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item label="密级状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-select placeholder="请选择密级状态" v-decorator="['secrecyStatus']">
                            <a-select-option value="true">
                                启用
                            </a-select-option>
                            <a-select-option value="false">
                                关闭
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-input-number :min="0" placeholder="请输入排序" v-decorator="['secrecySort']"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-form-item class="hiddenItem">
                <a-input v-decorator="['uuid']" disabled type="hidden"/>
            </a-form-item>
        </a-form>
    </t-modal>
  </template>
  
  <script>
    // 表单字段
    const fields = [
        'uuid',
        'pid',
        'secrecyName',
        'secrecyCode',
        'secrecyStatus',
        'secrecySort',
    ]
  
    export default {
        props: {
            visible: {
                type: Boolean,
                required: true
            },
            title: {
                type: String,
            },
            model: {
                type: Object,
            },
        },
        watch: {
            visible(val) {
                if (val) {
                    this.$post('/system/sysSecrecy/getTreeAllSysSecrecy').then(res => {
                        if (res.statusCode === 200) {
                            this.treeData = res.data;
                        }
                    })
                }
            },
            model(val) {
                if (val) {
                    this.form.resetFields();
                    fields.forEach(v => this.form.getFieldDecorator(v));
                    this.model && this.form.setFieldsValue({
                        uuid:val.uuid,
                        pid:val.pid,
                        secrecyName:val.secrecyName,
                        secrecyCode:val.secrecyCode,
                        secrecyStatus:val.secrecyStatus,
                        secrecySort:val.secrecySort,
                    })
                }
            },
        },
        data() {
            return {
                labelCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 4
                }
                },
                wrapperCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 18
                }
                },
                form: this.$form.createForm(this),
                treeData: [],
            }
        },
        methods: {
            add(m, data) {
                
            },
            edit(m, data) {
                
            },
        },
        mounted() {
            // 防止表单未注册
            fields.forEach(v => this.form.getFieldDecorator(v))
        }
    }
  </script>
  